<template>
	<!-- 主要布局页面 -->
	<div>
		<el-container style="height: 600px; border: 1px solid #eee">
			<el-aside width="200px" style="border: 2px #eee solid;">
				<el-input placeholder="请输入要查询的商品" v-model="filterText">
				</el-input>
				<el-tree :data="goodsTypeData" node-key="id" :props="defaultProps" 
					accordion @node-click="selType">
				</el-tree>
			</el-aside>
			<el-main>
				<!-- <div> -->
					<!-- 功能显示区域 -->
					<!-- <el-button type="primary" style="margin-left: 5px;" 
						@click="openAddGoods()">新增<i class="el-icon-plus"></i></el-button>
					<el-button type="primary" style="margin-left: 5px;" 
						@click="updateGoods()">修改<i class="el-icon-edit"></i></el-button>
					<el-button type="danger" style="margin-right: 5px;" 
						@click="deleteGoods()">删除<i class="el-icon-delete"></i></el-button> -->
				<!-- </div> -->
				<div id="app">
				    <div style="margin-top: 15px;">
				        <el-input @input="monitorContent" placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 500px">
				            <el-select v-model="select" slot="prepend" placeholder="请选择">
				                <el-option label="商品名称" value="1"></el-option>
				            </el-select>
				            <el-button @click="fuzzySearch" slot="append" icon="el-icon-search" style="background-color: lightgoldenrodyellow"></el-button>
				        </el-input>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<!--        添加一条新记录-->
				        <el-button type="primary" icon="el-icon-edit" @click="ofOpenAdd" plain >新增</el-button>
				        <!-- 点击弹框-->
				        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
				            <el-form  :model="goods" label-width="80px"> 
				                <el-form-item label="商品名称">
				                    <el-input v-model="goods.name"></el-input>
				                </el-form-item>
								<el-form-item label="型号">
								    <el-input v-model="goods.model"></el-input>
								</el-form-item>
								<el-form-item label="单位">
								    <el-input v-model="goods.unit"></el-input>
								</el-form-item>
								<el-form-item label="采购价">
								    <el-input v-model="goods.purchasingPrice"></el-input>
								</el-form-item>
								<el-form-item label="出售价">
								    <el-input v-model="goods.sellingPrice"></el-input>
								</el-form-item>
								<el-form-item label="库存下限">
								    <el-input v-model="goods.minNum"></el-input>
								</el-form-item>
				            </el-form>
				            <span slot="footer" class="dialog-footer">
				        <el-button @click="dialogVisible = false">取 消</el-button>
				        <el-button type="primary" @click="openAdd">确 定</el-button>
				      </span>
				        </el-dialog>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<!--        批量删除-->
				        <el-button type="danger" icon="el-icon-delete" @click="deleteIds" plain>删除</el-button>
						
						<!-- <el-button type="success" plain style="float: right;margin-right: 100px;" @click="saveUpdate">保存</el-button> -->
				
				    </div>
				
				<!-- 表格 -->
				    <div>
				        <el-table
				                ref="multipleTable"
				                tooltip-effect="dark"
				                @selection-change="handleSelectionChange"
				
				                :data="tableData"
				                stripe
				                style="width: 100%">
				            <el-table-column
				                    type="selection"
				                    width="55">
				            </el-table-column>
				            <el-table-column
				                    prop="code"
				                    label="商品编号"
				                    width="80">
				            </el-table-column>
				            <el-table-column
				                    prop="name"
				                    label="商品名称"
				                    width="180">
				            </el-table-column>
							<el-table-column
							        prop="model"
							        label="型号"
							        width="100">
							</el-table-column>
							<el-table-column
							        prop="unit"
							        label="单位"
							        width="100">
							</el-table-column>
							<el-table-column
							        prop="purchasingPrice"
							        label="采购价"
							        width="90">
							</el-table-column>
							<el-table-column
							        prop="sellingPrice"
							        label="出售价"
							        width="100">
							</el-table-column>
							<el-table-column
							        prop="minNum"
							        label="库存下线"
							        width="100">
							</el-table-column>
				           <el-table-column
				                   prop="producer"
				                   label="生产厂商"
				                   width="100">
				           </el-table-column>
				            <el-table-column
				                    label="操作">
				                <template slot-scope="scope">
				                    <el-button type="primary" @click="openUpdate(scope.row)" plain>修改</el-button>
				                    <!-- 点击修改弹框，带有默认值-->
				                    <el-dialog title="修改" :visible.sync="dialogUpdate" width="30%">
				                        <el-form  :model="goods" label-width="80px">
				                            <el-form-item label="编号:">
				                                <el-input v-model="goods.id" readonly></el-input>
				                            </el-form-item>
				                            <el-form-item label="商品名称:">
				                                <el-input v-model="goods.name" ></el-input>
				                            </el-form-item>
											<el-form-item label="商品型号:">
											    <el-input v-model="goods.model" ></el-input>
											</el-form-item>
											<el-form-item label="单位:">
											    <el-input v-model="goods.unit" ></el-input>
											</el-form-item>
											<el-form-item label="采购价:">
											    <el-input v-model="goods.purchasingPrice" ></el-input>
											</el-form-item>
											<el-form-item label="出售价:">
											    <el-input v-model="goods.sellingPrice" ></el-input>
											</el-form-item>
											<el-form-item label="库存下限:">
											    <el-input v-model="goods.minNum" ></el-input>
											</el-form-item>
				                        </el-form>
				                        <span slot="footer" class="dialog-footer">
				                            <el-button @click="dialogUpdate = false">取 消</el-button>
				                            <el-button type="primary" @click="ofUpdate">确 定</el-button>
				                        </span>
				                    </el-dialog>
				
				                    <el-button type="danger" @click="openDelete(scope.row.id)" plain>删除</el-button>
				                </template>
				            </el-table-column>
				        </el-table>
				    </div>
					<!-- <div class="block">
					    <el-pagination
					            @size-change="handleSizeChange"
					            @current-change="handleCurrentChange"
					            :current-page="goodsVo.currentPage"
					            :page-sizes="[3, 5, 10, 20]"
					            :page-size="goodsVo.sizePage"
					            layout="total, sizes, prev, pager, next, jumper"
					            :total="total">
					    </el-pagination>
					</div> -->
				    <div class="block">
				        <el-pagination
				                @size-change="handleSizeChange"
				                @current-change="handleCurrentChange"
				                :current-page="goodsVo.currentPage"
				                :page-sizes="[4, 7, 10, 20]"
				                :page-size="goodsVo.sizePage"
				                layout="total, sizes, prev, pager, next, jumper"
				                :total="total">
				        </el-pagination>
				    </div>
				</div>
			</el-main>
		</el-container>
		<!-- 弹框树状结构图 -->
		<el-dialog title="请选择商品类型" :visible.sync="a">
			<!-- 不能公用一个树状结构，需要重新修改 -->
			<el-tree :data="goodsTypeData" :props="defaultProps"
				accordion @node-click="selGoodsTypeByAdd">
			</el-tree>
			 <div slot="footer" class="dialog-footer">
			    <el-button @click="a = false">取 消</el-button>
			    <el-button type="primary" @click="a = false">确 定</el-button>
			  </div>
		</el-dialog>	
		<!-- 新增物品逻辑 -->
		<el-dialog title="新增商品" :visible.sync="addGoodsDialog">
		  <el-form :model="goodsObj" :inline="true">
		    <el-form-item label="商品分类">
				<el-input
				      class="inline-input"
				      v-model="goodsObj.typeName"
				      @focus="openGoodsType()"
				      placeholder="请输入内容"></el-input>
		    </el-form-item>
			<el-form-item label="商品编号">
			  <el-input v-model="goodsObj.code" autocomplete="off" readonly></el-input>
			</el-form-item>
			<br>
			<el-form-item label="商品名称">
			  <el-input v-model="goodsObj.name" autocomplete="off"></el-input>
			</el-form-item>
			<br>
			<el-form-item label="商品型号">
			  <el-input v-model="goodsObj.model" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="商品单位">
				<el-select v-model="goodsObj.unit">
					 <el-option :label="goodsUnit.name" :value="goodsUnit.name"  
					 v-for="(goodsUnit,index) in goodsUnitList" :key="index"></el-option>
				</el-select>
			</el-form-item>
			<br>
			<el-form-item label="采购售价:">
			  <el-input v-model="goodsObj.purchasingPrice"></el-input>
			</el-form-item>
			<el-form-item label="销售售价:">
			  <el-input v-model="goodsObj.sellingPrice"></el-input>
			</el-form-item>
			<br>
			<el-form-item label="生产厂商:">
			  <el-input v-model="goodsObj.producer"></el-input>
			</el-form-item>
			<el-form-item label="库存下线:">
			  <el-input v-model="goodsObj.minNum"></el-input>
			</el-form-item>
			<el-form-item label="备注">
			  <el-input type="textarea" v-model="goodsObj.remarks" style="width: 500px;height: 80px;"></el-input>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="addGoodsDialog = false">取 消</el-button>
		    <el-button type="primary" @click="insertGoodsToDB">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				filterText: '',
				goodsTypeData: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
		//表格中的数据，由后端传值
		tableData: [],
		//供应商后台接收对象
		goodsVo: {
			name: '',
			typeId: 0,
			currentPage: 1,
			sizePage: 4,
		},
		//总记录数
		total: 20,
		//供应商对象
		goods: {
			id:'',
			code: '',
			name:'',
			model:'',
			unit:'',
			purchasingPrice:'',
			sellingPrice:'',
			minNum:'',
			producer:'',
		},
		//搜索输入框
		input: '',
		//搜素下拉列表
		select: '',
		//新增弹窗
		dialogVisible: false,
		//关于修改的弹窗
		dialogUpdate: false,
		//批量删除的id
		ids: [],
				goodsData: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				//新增商品逻辑操作-----
				addGoodsDialog:false,
				goodsObj:{
					//类别
					typeId:"",
					code:"", //提前生成唯一的
					name:"",
					model:"", //型号
					typeName:'' ,//类型对应的名称
					purchasingPrice:"",
					sellingPrice:"",
					producer:"",
					minNum:"" //库存下线
				},
				a:false,
				goodsUnitList:[],
			}
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		methods: {
			//保存商品进入数据库
			insertGoodsToDB(){
				this.postRequest("/goods/save",this.goodsObj).then(resp=>{
					if(resp){
						//关闭对话框，应该需要刷新，暂时刷新数据了
						this.addGoodsDialog=false;
					}
				})
			},
			// 打开保存对话框
			openAddGoods(){
				this.addGoodsDialog=true;
				//数据填充，填充类别和单位，类别是树形结构，单位是下拉列表框
				//获取系统中的商品单位
				this.postRequest("/goods/goodsUnitList").then(resp=>{
					if(resp){
						this.goodsUnitList = resp.data.goodsUnit;
						this.goodsObj.code=resp.data.code;
					}
				})
			},
			handleSelect(){
				console.log("-----触发选中-------");
			},
			filterNode(value, data) {
				console.log(data);
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			initGoods() {
				console.log("初始化商品类型数据");
				this.postRequest("/goodstype/likeQuery").then(res => {
					if (res) {
						this.goodsTypeData = res.data.typesList;
						this.goodsData = res.data.goodsList;
					}
				})
			},
			openGoodsType(){
				console.log("选中状态！");
				this.a=true;
				console.log("helloworld====");
			},
			selGoodsTypeByAdd(data){
				const state = data.state;
				if(state!=0){
					alert("请选择对应的子节点");
				}else{
					this.goodsObj.typeName=data.name;
					this.goodsObj.typeId=data.id;
				}
			},
			selGoodsType() {
				//const state = data.state;
			
					this.postRequest("/goodstype/selectTypeOfTier?pid=-1").then(res=>{
							this.goodsTypeData=res.data.goodstypeList;
							console.log("数据清除");
					})
				
			},
			//页面加载完后调用的方法
			queryDate(){
				this.postRequest('/goods/likeQuery',this.goodsVo).then(result=>{
					this.tableData=result.data.list;
					this.total=result.data.total;
				})
			},
			//模糊查询
			fuzzySearch() {
				if(this.select == 1){
					this.goodsVo.name=this.input;
				}
				this.queryDate();
			},
			//选中菜单按类型查询
			selType(data){
				console.log(data);
				if(data.state==0 || data.id==1){
					this.goodsVo.typeId=data.id;
					this.goodsVo.currentPage=1;
					this.postRequest('/goods/likeQuery',this.goodsVo).then(result=>{
						this.tableData=result.data.list;
						this.total=result.data.total;
					})
				};
			},
			//打开新增弹窗
			ofOpenAdd(){
				this.dialogVisible=true;
				//清除默认值
				this.goods.id='';
				this.goods.address='';
				this.goods.contact='';
				this.goods.name='';
				this.goods.number='';
				this.goods.remarks='';
			},
			//点击确定新增一条数据
			openAdd(){
				this.postRequest('/goods/save',this.goods).then(result => {
					this.queryDate();
				});
				//关闭弹窗
				this.dialogVisible=false;
			},
			//关于分页
			handleSizeChange(val){
				this.goodsVo.sizePage=val;
				this.queryDate();
			},
			handleCurrentChange(val){
				this.goodsVo.currentPage=val;
				this.queryDate();
			},
			//复选框获取id，用于批量删除
			handleSelectionChange(val){
				var idm = [];
				for(let goods of val){
					idm.push(goods.id);
				}
				this.ids=idm;
			},
			//打开修改弹窗
			openUpdate(row){
				this.goods.id=row.id;
				this.goods.address=row.address;
				this.goods.contact=row.contact;
				this.goods.name=row.name;
				this.goods.number=row.number
				this.goods.remarks=row.remarks;
				
				this.dialogUpdate=true;
			},
			//修改
			ofUpdate(){
				this.postRequest('/goods/update',this.goodsVo).then(result=>{
					this.queryDate()
				});
				//关闭弹窗
				this.dialogUpdate=false;
			},
			//单个删除
			openDelete(){
				this.$confirm('删了？确定？','提示',{
					confirmButtonText: '删了吧',
					cancelButtonText: '还是算了',
					type: 'warning'
				}).then(()=>{
					console.log(id);
					this.deleteRequest('/goods/delOne/'+id).then(result=>{
						if(this.total%this.goodsVo.sizePage === 1){
							this.goodsVo.currentPage--;
						}
						this.queryDate();
					});
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '取消删除了'
					});
				});
			},
			monitorContent(){
				
			},
			//批量删除
			deleteIds(){
				this.$confirm('删了？','提示',{
					confirmButtonText: '删！',
					cancelButtonText: '算了',
					type: 'warning'
				}).then(() => {
					if(this.ids.length != 0){
						this.deleteRequest('/goods/delBatch',this.ids).then(result=>{
							if(this.ids.length === this.tableData.length){
								this.goodsVo.currentPage--;
							}
							this.queryDate();
						})
					}else {
						this.$message({
							type: 'info',
							message: '无法选中记录'
						});
					}
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},
		mounted() {
			this.queryDate();
			this.selGoodsType();
		}

	}
</script>

<style>
</style>